<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>拍卖</title>
    <!-- Bootstrap -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
          integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
    <link rel="stylesheet" href="http://localhost:8080/css/auction.css">
</head>
<body>
<nav class="navbar navbar-inverse navbar-fixed-top">
    <div class="container-fluid">
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <form action="/goodslist" method="get">
                    <button type="submit" class="btn btn-info" style="margin-top: 8px;margin-right: 15px">首页</button>
                </form>
            </ul>
            <ul class="nav navbar-nav">
                <form action="/release" method="get">
                    <button type="submit" class="btn btn-info" style="margin-top: 8px">发布商品</button>
                </form>
            </ul>
            <ul class="nav navbar-nav navbar-right">
                <li>
                    <form action="/chatlist" method="get">
                        <button type="submit" class="btn btn-info" style="margin-top: 8px;margin-right: 10px">我的消息
                        </button>
                    </form>
                </li>
                <li>
                    <form action="/mySell" method="get">
                        <button type="submit" class="btn btn-info" style="margin-top: 8px;margin-right: 10px">我的发布
                        </button>
                    </form>
                </li>
                <li>
                    <form action="/myCollection" method="get">
                        <button type="submit" class="btn btn-info" style="margin-top: 8px;margin-right: 10px">我的关注
                        </button>
                    </form>
                </li>
                <li>
                    <form action="/logout" method="get">
                        <button type="submit" class="btn btn-info" style="margin-top: 8px;margin-right: 10px">退出登录
                        </button>
                    </form>
                </li>
            </ul>
        </div>
    </div>
</nav>

<section class="goodsDetailBox w1200">
    <ol class="breadcrumb" style="background: white">
        <li><a href="http://localhost:8080/goodslist">商品列表</a></li>
        <li class="active">商品拍卖详情</li>
    </ol>
    <div id="detail">

    </div>
</section>

<section class="commentBox w1200" style="background: white">
    <h4 style="color: goldenrod;">竞价记录</h4>
    <div id="auctionList">

    </div>
</section>

<section class="commentBox w1200">
    <form>
            <span>
                <input type="number" class="commentInfo" placeholder="请输入竞价金额" id="auctionPrice">
            </span>
        <span>
            <button type="button" class="btn btn-primary" style="height: 50px;margin-left: 95%"
                    onclick="auction()">提交</button>
        </span>
    </form>
</section>


<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"
        integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ"
        crossorigin="anonymous"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"
        integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd"
        crossorigin="anonymous"></script>

<script type="text/javascript">
    let userState = 0;
    let id = [[${goodsId}]]; //从model的goodsId属性获取值
    let nowPrice;

    window.onload = function () {
        getUserState();

        $.ajax({
            url: "/detail/" + id,
            type: "POST",
            success: function (item) {
                let msg = "";
                $.ajax({
                    async: false,
                    url: "/auction/maxprice",
                    type: "GET",
                    data: {"id": id},
                    success: function (result) {
                        if (result == "null") nowPrice = item['price'];
                        else nowPrice = result;
                    },
                    error: function () {
                        alert("获取当前最大价格失败");
                    }
                })

                msg += "<div class=\"goodsItem\">\n" +
                    "        <div class=\"goodsItemImgBox\">\n" +
                    "            <img class=\"goodsItemImg\" src=\"" + item['imagePath'] + "\">\n" +
                    "                </div>";
                msg += "<div class=\"goodsItemInfo\">\n" +
                    "            <div class=\"goodsItemName\">" +
                    item['name'] + "\n" +
                    "                    </div>";
                msg += "<div class=\"goodsItemDetail1\">\n" +
                    item['introduction'] + "\n" +
                    "            </div>";
                msg += "<div class=\"goodsItemDetail2\">\n" +
                    "                <div class=\"goodsItemDetailLeft\">\n" +
                    "                    <span class=\"goodsItemDetailLeft1\">当前拍卖价格￥<span id=\"nowPrice\">" + nowPrice + "</span>";
                msg += "</span>\n" +
                    "                            <br>\n" +
                    "                            <span class=\"goodsItemDetailLeft2\" id='thumbNum'>" + item['thumbNum'] + "</span>";
                msg += "<span>人点赞</span>\n" +
                    "                            <br>\n" +
                    "                            <span class=\"goodsItemDetailLeft2\" id='commentNum'>" + item['commentNum'] + "</span>";
                msg += "<span>条评论</span>\n" + "</div>\n" +
                    "            </div>";
                msg += "<div class=\"goodsItemDetail2\" style=\"margin-top: 20px\">\n" +
                    "                <div class=\"goodsItemDetailLeft\">\n" +
                    "                    <span class=\"goodsItemDetailLeft2\">发布时间：</span>\n" +
                    "                    <span class=\"goodsItemDetailLeft2\">" + item['releaseTime'] + "</span>\n" +
                    "                </div>\n" +
                    "            </div>";
                msg += "<div style=\"margin-top: 30px;\">\n" +
                    "                <button type=\"button\" style=\"margin-left: 20px\" class=\"btn btn-primary\">立即购买</button>\n" +
                    "                <button type=\"button\" style=\"margin-left: 50px\" class=\"btn btn-success\" onclick=\"thumb()\">";
                msg += "    点赞\n" +
                    "                </button>\n" +
                    "                <button type=\"button\" style=\"margin-left: 50px\" class=\"btn btn-warning\"\n" +
                    "                        onclick=\"subscribe()\">";
                msg += "加入关注\n" +
                    "                </button>\n" +
                    "                <button type=\"button\" style=\"margin-left: 50px\" class=\"btn btn-info\" onclick=\"chat(" + item['merchantId'] + ")\">";
                msg += "联系卖家\n" +
                    "                </button>\n" +
                    "            </div>\n" +
                    "        </div>\n" +
                    "    </div>";

                $("#detail").html(msg);
            },
            error: function () {
                alert("获取商品详情失败");
            }
        })

        getAuction();
    }

    function subscribe() {
        if (userState == 0) {
            alert("请先登录");
            return;
        }

        $.ajax({
            url: "/subscribe",
            type: "POST",
            data: {"id": id},
            success: function (result) {
                alert(result);
            },
            error: function () {
                alert("商品关注失败");
            }
        })
    }

    function getAuction() {
        $.ajax({
            url: "/auction",
            type: "GET",
            data: {"id": id},
            success: function (result) {
                let msg = "";

                for (let i in result) {
                    let item = result[i];

                    msg += "<div class=\"comment-wrap\">\n" +
                        "        <div class=\"comment-block\">\n" +
                        "            <div class=\"comment-name\">\n" +
                        item['userName'] + "\n" +
                        "            </div>\n";
                    msg += "            <p class=\"comment-text\">" + item['price'] + "元</p>\n" +
                        "            <div class=\"bottom-comment\">\n";
                    msg += "                <div class=\"comment-date\">" + item['time'] + "</div>\n" +
                        "            </div>\n" +
                        "        </div>\n" +
                        "    </div>";
                }
                $("#auctionList").html(msg);
            },
            error: function () {
                alert("获取竞价记录失败");
            }
        })
    }

    function auction() {
        if (userState == 0) {
            alert("请先登录");
            return;
        }

        let price = document.getElementById("auctionPrice").value;

        if (price <= nowPrice) {
            alert("出价必须大于当前价格");
            return;
        } else {
            nowPrice = price;
            $("#nowPrice").html(price);
        }

        let userName;

        $.ajax({
            url: "/user/name",
            type: "GET",
            success: function (result) {
                userName = result;

                $.ajax({
                    url: "/auction",
                    type: "POST",
                    data: {"goodsId": id, "userName": userName, "price": price},
                    success: function (result) {
                        getAuction();
                    },
                    error: function () {
                        alert("竞价失败");
                    }
                })
            },
            error: function () {
                alert("获取用户名失败");
            }
        })
    }

    function thumb() {
        if (userState == 0) {
            alert("请先登录");
            return;
        }

        $.ajax({
            url: "/thumb",
            type: "GET",
            data: {"id": id},
            success: function (result) {
                result = parseInt(result);
                result += 1;
                $.ajax({
                    url: "/thumb",
                    type: "POST",
                    data: {"id": id, "num": result},
                })
                $("#thumbNum").html(result);
            },
            error: function () {
                alert("获取点赞数量失败");
            }
        })
    }

    function chat(id) {
        if (userState == 0) {
            alert("请先登录");
            return;
        }

        window.location.href = "/chat/" + id;
    }

    function getUserState() {
        $.ajax({
            url: "/user/state",
            type: "GET",
            success: function (result) {
                if (result == "已登录") {
                    userState = 1;
                    getNavi(1);
                } else {
                    getNavi(0);
                }
            },
            error: function () {
                alert("获取登录状态失败");
            }
        });
    }

    function getNavi(state) {
        let msg = "";
        if (state == 0) {
            msg += "<li>\n" +
                "       <form action=\"/login\" method=\"get\">\n" +
                "           <button type=\"submit\" class=\"btn btn-info\" style=\"margin-top: 8px;margin-right: 10px\">登录\n" +
                "               </button>\n" +
                "       </form>\n" +
                "   </li>";
        } else {
            msg += "<li>\n" +
                "       <form action=\"/chatlist\" method=\"get\">\n" +
                "           <button type=\"submit\" class=\"btn btn-info\" style=\"margin-top: 8px;margin-right: 10px\">我的消息\n" +
                "           </button>\n" +
                "       </form>\n" +
                "   </li>\n" +
                "   <li>\n" +
                "       <form action=\"/mysell\" method=\"get\">\n" +
                "           <button type=\"submit\" class=\"btn btn-info\" style=\"margin-top: 8px;margin-right: 10px\">我的发布\n" +
                "           </button>\n" +
                "       </form>\n" +
                "   </li>\n" +
                "   <li>\n" +
                "       <form action=\"/mycollection\" method=\"get\">\n" +
                "           <button type=\"submit\" class=\"btn btn-info\" style=\"margin-top: 8px;margin-right: 10px\">我的关注\n" +
                "           </button>\n" +
                "       </form>\n" +
                "   </li>" +
                "   <li>\n" +
                "       <form action=\"/logout\" method=\"get\">\n" +
                "           <button type=\"submit\" class=\"btn btn-info\" style=\"margin-top: 8px;margin-right: 10px\">退出登录\n" +
                "           </button>\n" +
                "       </form>\n" +
                "   </li>";
        }
        $("#naviInfo").html(msg);
    }

</script>

</body>
</html>